<template>
  <div class="lb-container">
    <div class="category-item" v-for="item in categoryList" :key="item.id">
      <div class="title">
        {{item.value}}
        <el-button
          class="btn"
          type="primary"
          icon="el-icon-plus"
          :loading="loading"
          @click="showDilog(item)"
          circle
          plain
        />
      </div>
      <div class="label-wrap">
        <el-tag
          class="tag"
          v-for="(tag, index) in item.tags"
          :key="tag.tagId"
          :color="tag.color"
          :hit="false"
          closable
          effect="dark"
          @close="onDeleteLabel(item, tag, index)">
          {{tag.tagName}}
        </el-tag>
      </div>
    </div>

    <el-dialog
      title="新增标签"
      :visible.sync="show"
      width="400px">
      <el-input type="text" v-model="tempName"  placeholder="请输入标签名称" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onAddLabel">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
import { getCategory, getLabels, deleteLabel, addLabel } from '../api/index';

const colors = [
  '#FFB6C1', '#DC143C', '#DB7093', '#C71585', '#4B0082',
  '#7B68EE', '#0000FF', '#6495ED', '#B0C4DE', '#6E8B3D',
  '#008B8B', '#7FFFAA', '#FFFF00', '#FFD700', '#C0C0C0',
  '#FFE4E1', '#FFEBCD', '#008000', '#F0FFF0', '#708090'
];
export default {
  name: 'LbSetting',
  components: {},
  data() {
    return {
      show: false,
      tempName: '',
      loading: true,
      categoryList: [],
      select: null
    };
  },
  methods: {
    showDilog(item) {
      this.tempName = '';
      this.select = item;
      this.show = true;
    },
    getCategoryList() {
      getCategory().then(res => {
        if (res.data.success) {
          this.getLabelList(res.data.data || []);
        }
      });
    },
    getLabelList(data) {
      const xhrs = data.map(item => getLabels(item.code));
      Promise.all(xhrs).then(result => {        
        this.categoryList = data.map((item, index) => {
          let tags = [];
          if (result[index].data.success) {
            tags = (result[index].data.data || []).map((tag, i) => {
              tag.color = colors[i % 20];
              return tag;
            });
          }
          item.tags = tags;
          return item;
        });
        this.loading = false;
      });
    },
    // 查询某个分类的标签
    getCategoryLabels(category, callback) {
      getLabels(category.code).then(res => {
        if (res.data.success) {
          category.tags = (res.data.data || []).map((tag, i) => {
            tag.color = colors[i % 20];
            return tag;
          });
        }
        callback && callback();
      });
    },
    // 删除标签
    onDeleteLabel(category, tag, index) {
      deleteLabel(tag.tagId).then(res => {
        if (res.data.success) {
          category.tags.splice(index, 1);
        }
      });
    },
    // 新增标签
    onAddLabel() {
      this.loading = true;
      addLabel(this.tempName, this.select.code).then(res => {
        if (res.data.success) {
          this.getCategoryLabels(this.select, () => {
            this.show = false;
            this.loading = false;
          });          
        }
      });
    }
  },
  mounted() {
    this.getCategoryList();
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
.lb-container {
  padding: 24px 15%;
}

.category-item {
  background-color: #fff;
  margin-bottom: 24px;

  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 16px;
  }

  .btn {
    float: right;
    margin-top: 4px;
  }

  .label-wrap {
    padding: 8px;
    min-height: 56px;
  }

  .tag {
    margin: 8px;
    border: none;
  }


}
</style>
